<template>
    <section style="width:85%">


        <el-form label-width="150px"  :rules="formAddRules" :model="formAdd" ref="formAdd">
            <el-collapse v-model="activeNames"  style=" padding-left: 20px;padding-right: 20px">
                <el-collapse-item title="基本信息" name="1">

            <el-row style="width: 90%;">
                <el-col :span=12>
                    <el-form-item label="工程编码" prop="projectCode">
                        <el-input v-model="formAdd.projectCode" style="width: 100%" :disabled="formAdd.id !=null"></el-input>

                        <div >新增后不允许修改</div>
                    </el-form-item>
                </el-col>
                <el-col :span=12>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="formAdd.name"></el-input>
                    </el-form-item>
                </el-col>


            </el-row>
                    <el-row style="width: 90%;">
                        <el-col :span=24>
                            <el-form-item label="管理员" prop="admins">
                                　
                                <el-tag :key="item.id" type="primary" v-for="(item, index) in formAdd.admins"  closable="true" @close="handleClose(index)">
                                    {{item.name}}
                                </el-tag>
                                <el-button size="small"
                                           @click="onSelectedHandlers()">
                                    选择
                                </el-button>
                            </el-form-item>
                        </el-col>

                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="会话设置" name="2">
            <el-row style="width: 90%;">
                <el-col :span=12>
                    <el-form-item label="超时时间(ms)" prop="expireTime">
                        <el-input 　 v-model="formAdd.expireTime"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span=12>
                    <el-form-item label="登陆地址" prop="loginAddress">
                        <el-input 　 v-model="formAdd.loginAddress"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row style="width: 90%;">
                <el-col :span=12>
                    <el-form-item label="刷新会话时间(ms)" prop="tokenRefreshInterval">
                        <el-input 　 v-model="formAdd.tokenRefreshInterval"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span=12>
                    <el-form-item label="加密盐" prop="salt">
                        <el-input v-model="formAdd.salt" style="width: 100%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="width: 90%;">
                <el-col :span=24>
                    <el-form-item label="匿名地址" prop="annoUrl">
                        <el-input type="textarea" v-model="formAdd.annoUrl" style="width: 100%"></el-input>
                        <div >多个用分号分隔</div>
                    </el-form-item>

                </el-col>
            </el-row>
                </el-collapse-item>
                <el-collapse-item title="跨域设置" name="3">
            <el-row style="width: 90%;">
                <el-col :span=12>
                    <el-form-item label="域名" prop="allowedOrigins">
                        <el-input v-model="formAdd.allowedOrigins" style="width: 100%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span=12>
                    <el-form-item label="允许方法" prop="allowedMethods">
                        <el-input v-model="formAdd.allowedMethods" style="width: 100%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="width: 90%;">
                <el-col :span=12>
                    <el-form-item label="允许header" prop="allowedHeaders">
                        <el-input v-model="formAdd.allowedHeaders" style="width: 100%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span=12>
                    <el-form-item label="支持输出头" prop="exposedHeaders">
                        <el-input v-model="formAdd.exposedHeaders" style="width: 100%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="width: 90%;">
                <el-col :span=12>
                    <el-form-item label="允许证书" prop="allowCredentials">
                        　
                        <el-switch on-text="启用" off-text="禁用" v-model="formAdd.allowCredentials"></el-switch>
                    </el-form-item>
                </el-col>
                　
                <el-col :span=12>
                    　
                </el-col>
            </el-row>
                </el-collapse-item>
            </el-collapse>

                <el-form-item>
                    　
                    <el-button type="primary" @click="submitFormAdd('formAdd')">保存</el-button>

                </el-form-item>
        </el-form>


        <div v-if="userDialog.userDialogVisible">
            <user-dialog :DialogVisible="userDialog.userDialogVisible"
                         :params="{user: userDialog.selectUser,orgType:userDialog.orgTypeValue}"
                         @on-dialog-change="onDialogChange"
            ></user-dialog>
        </div>
    </section>
</template>
<style>

</style>
<script>
    import {AjaxByAll} from '@/api/api';
    import userDialog from '@/views/common/userDialog.vue'

    export default {
        data() {

            return {
                activeNames: ['1'],
                labelPosition: 'left',
                formAdd: {
                    id: null,
                    projectCode: null,
                    salt: null,
                    name: null,
                    expireTime: null,
                    loginAddress: null,
                    tokenRefreshInterval: null,
                    annoUrl: null,
                    allowedOrigins: null,

                    allowedMethods: null,
                    allowedHeaders: null,

                    exposedHeaders: null,
                    allowCredentials: true,
                    admins: []
                },
                defaultData: null,

                formAddRules: {
                    projectCode: [
                        {required: true, message: '请输入 工程编码', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入 工程名称', trigger: 'blur'}
                    ],
                    salt: [
                        {required: true, message: '请输入 加密盐', trigger: 'blur'}
                    ],
                    expireTime: [
                        {required: true, message: '请输入 超时时间', trigger: 'blur'}
                    ],
                    loginAddress: [
                        {required: true, message: '请输入 登陆地址', trigger: 'blur'}
                    ]
                }, userDialog: {

                    userDialogVisible: false,
                    selectUser: [],
                    orgTypeValue:2
                }
            }
        },

        methods: {
            renderHeader(h, params) {
                let a = [h('el-button', {
                    props: {
                        size: "mini",
                        type: "primary"
                    },
                    on: {
                        click: () => {
                            this.renderAddRow();
                        }
                    }
                }, '增加')];
                return h('div', a);
            },
            renderAddRow() {

                this.formAdd.annoUrl.push("");
            },
            renderRemoveRow(index) {

                this.formAdd.annoUrl.splice(index, 1);
            },
            getProjectInfo(projectCode) {


                let urls = 'gateway/project/getByProjectCode/' + projectCode;
                let method = 'get';
                let form = {};
                AjaxByAll(method, urls, form).then(data => {
                    if (data.code === 200) {
                        this.formAdd = data.data;

                    } else {
                        this.$message({
                            message: data.msg,
                            type: 'error'
                        });

                    }
                });

            },
            submitFormAdd(formName) {

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let form = this.formAdd;
                        let urls = 'gateway/project/save';
                        let method = 'post';
                        AjaxByAll(method, urls, form).then(data => {
                            if (data.code === 200) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                });


                            } else {
                                this.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        });


                    } else {
                        this.$message({
                            message: '校验失败',
                            type: 'error'
                        });
                    }
                });
            },
            handleClose(index) {
                this.formAdd.admins.splice(index, 1);
            },
            onSelectedHandlers() {
                this.userDialog.userDialogVisible = true;
                this.userDialog.selectUser = this.formAdd.admins;
            }, onDialogChange(val) {
                this.userDialog.userDialogVisible = false;
                this.formAdd.admins= val.users ;
                this.userDialog.selectUser = [];

            },
        },
        created() {
            let projectCode = this.authProjectCode;

            if (typeof projectCode === 'undefined') {
                projectCode = this.$route.params.projectCode;
            }
            if (projectCode === '') {
                return;
            }
            this.getProjectInfo(projectCode);

        },
        mounted: function () {

        }, components: {
            userDialog
        },
        props: {

            authProjectCode: String
        }
    }
</script>
<style>
    .el-collapse-item__header {
        padding-left: 20px;
    }
</style>